<template>
  <div class="userView" v-if="user.relationship != 0">
    <div class="headerBox">
      <div class="header">
        <div class="left" @click="back">
          <van-icon name="arrow-left" size="25" />
        </div>
        <div class="center" v-if="headerState == 2 || headerState == 3">
          <div class="left1">
            <div class="avatar">
              <van-image
                round
                width="34px"
                height="34px"
                :src="user.user.avatar_medium"
                lazy-load
              />
            </div>
            <div class="nickname">{{ user.user.nick }}</div>
          </div>
          <div
            v-if="!isFollow"
            class="follow"
            @click="follow(user.user.userid)"
          >
            关注
          </div>
          <div v-else class="isFollow" @click="noFollow(user.user.userid)">
            已关注
          </div>
        </div>
        <div class="right">
          <van-icon name="ellipsis" size="25" />
        </div>
      </div>
      <div class="headerNavBox" v-if="headerState == 3">
        <div class="headerNav">
          <router-link
            :to="{
              path: 'userCookbook',
              query: { id: route.currentRoute.value.query.id },
            }"
            replace
          >
            菜谱&nbsp;{{
              user.user.recipes_count != "0" ? user.user.recipes_count : ""
            }}
          </router-link>
        </div>
        <div class="headerNav">
          <router-link
            :to="{
              path: 'userNote',
              query: { id: route.currentRoute.value.query.id },
            }"
            replace
          >
            笔记&nbsp;{{
              user.user.notes_count != "0" ? user.user.notes_count : ""
            }}
          </router-link>
        </div>
        <div class="headerNav">
          <router-link
            :to="{
              path: 'userCollect',
              query: { id: route.currentRoute.value.query.id },
            }"
            replace
          >
            收藏&nbsp;{{
              user.user.collect_count != "0" ? user.user.collect_count : ""
            }}
          </router-link>
        </div>
      </div>
    </div>
    <div class="likeheader"></div>
    <div class="information">
      <div class="name" ref="nameBox">
        <div class="left">
          <div class="avatar">
            <van-image
              width="80"
              height="80"
              round
              :src="user.user.avatar_medium"
              lazy-load
            />
          </div>
          <div class="verified" v-if="user.user.verified_image">
            <van-image
              width="20"
              height="20"
              round
              :src="user.user.verified_image"
              lazy-load
            />
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="nickname">{{ user.user.nick }}</div>
            <div
              class="medal"
              :style="{ backgroundImage: `url(${user.user.usermedal.icon})` }"
            >
              {{ user.user.usermedal.count_text }}
            </div>
            <div class="lv">LV.{{ user.user.lvl }}</div>
          </div>
          <div
            v-if="!isFollow"
            class="follow"
            @click="follow(user.user.userid)"
          >
            关注
          </div>
          <div v-else class="isFollow" @click="noFollow(user.user.userid)">
            已关注
          </div>
        </div>
      </div>
      <div class="sub">
        <div>厨娘</div>
        <div>{{ user.user.age }}</div>
        <div>{{ user.user.location }}</div>
        <div class="ip">IP属地 {{ user.user.ip_address_location }}</div>
      </div>
      <div class="signature">{{ user.user.introduction }}</div>
    </div>
    <div class="first-navBox">
      <div class="first-nav">
        <div class="number">{{ user.user.following_count_text }}</div>
        <div class="word">关注</div>
      </div>
      <div class="first-nav">
        <div class="number">{{ user.user.followers_count_text }}</div>
        <div class="word">粉丝</div>
      </div>
      <div class="first-nav">
        <div class="number">{{ user.user.favoed_count_text }}</div>
        <div class="word">被收藏</div>
      </div>
      <div class="first-nav">
        <div class="number">{{ user.user.noted_count_text }}</div>
        <div class="word">被学做</div>
      </div>
      <div class="first-nav">
        <div class="number">{{ user.user.point_text }}</div>
        <div class="word">经验值</div>
      </div>
    </div>
    <div class="sec-navBox" ref="secNavBox">
      <div class="sec-nav">
        <router-link
          :to="{
            path: 'userCookbook',
            query: { id: route.currentRoute.value.query.id },
          }"
          replace
        >
          菜谱&nbsp;{{
            user.user.recipes_count != "0" ? user.user.recipes_count : ""
          }}
        </router-link>
      </div>
      <div class="sec-nav">
        <router-link
          :to="{
            path: 'userNote',
            query: { id: route.currentRoute.value.query.id },
          }"
          replace
        >
          笔记&nbsp;{{
            user.user.notes_count != "0" ? user.user.notes_count : ""
          }}
        </router-link>
      </div>
      <div class="sec-nav">
        <router-link
          :to="{
            path: 'userCollect',
            query: { id: route.currentRoute.value.query.id },
          }"
          replace
        >
          收藏&nbsp;{{
            user.user.collect_count != "0" ? user.user.collect_count : ""
          }}
        </router-link>
      </div>
    </div>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { useDouguoStore } from "@/stores/douguo";
import { storeToRefs } from "pinia";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { RouterLink, RouterView, useRouter } from "vue-router";

const douguo = useDouguoStore();

const { user } = storeToRefs(douguo);

const { updataUser } = douguo;

const route: object = useRouter();

updataUser(route.currentRoute.value.query.id);

const back = () => {
  history.go(-1);
};

const isFollow = ref(false);
if (
  JSON.parse(localStorage.getItem("follow") || "[]").indexOf(
    route.currentRoute.value.query.id
  ) != -1
) {
  isFollow.value = true;
}

const follow = (id: string) => {
  // console.log("follow");
  let follows = new Set(JSON.parse(localStorage.getItem("follow") || "[]"));
  follows.add(id);
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = true;
};

const noFollow = (id: string) => {
  let follows = JSON.parse(localStorage.getItem("follow") || "[]").filter(
    (o: string) => o != id
  );
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = false;
};

const headerState = ref(1);
const secNavBox = ref<HTMLElement>();
const nameBox = ref<HTMLElement>();

const handleScroll = () => {
  // console.log(secNavBox.value?.offsetTop);
  // console.log(window.scrollY);

  if (window.scrollY < nameBox.value?.offsetTop + 32) {
    headerState.value = 1;
  } else if (window.scrollY < secNavBox.value?.offsetTop - 50) {
    headerState.value = 2;
  } else {
    headerState.value = 3;
  }
};

onMounted(() => {
  // chrome
  document.body.scrollTop = 0;
  // firefox
  document.documentElement.scrollTop = 0;
  // safari
  window.pageYOffset = 0;

  window.addEventListener("scroll", handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll); // 离开当前组件别忘记移除事件监听
});
</script>

<style lang="scss" scoped>
.userView {
  // padding: 0 15px;

  .headerBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 10;
    background-color: white;

    .header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e2e2e2;
      box-sizing: border-box;

      .left {
        margin-left: 15px;
        width: 25px;
        height: 25px;
        cursor: pointer;
      }

      .center {
        width: 260px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left1 {
          display: flex;
          align-items: center;

          .avatar {
            width: 34px;
            height: 34px;
            margin-right: 8px;
          }

          .nickname {
            width: 130px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .follow {
          width: 78px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 15px;
          background-color: #ffc632;
          font-size: 16px;
          cursor: pointer;
        }

        .isFollow {
          width: 78px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 15px;
          background-color: #fafafa;
          color: #999;
          font-size: 16px;
          cursor: pointer;
        }
      }

      .right {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        cursor: pointer;
      }
    }

    .headerNavBox {
      height: 50px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-bottom: 20px;

      .headerNav:nth-of-type(2) {
        margin: 0 45px;
      }

      .headerNav {
        a {
          font-size: 16px;
          color: #999;
        }

        .router-link-active {
          color: #000;
          font-weight: bold;
        }
      }
    }
  }

  .likeheader {
    height: 50px;
  }

  .information {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 15px;

    .name {
      display: flex;
      // justify-content: space-between;
      margin-bottom: 30px;

      .left {
        position: relative;
        width: 82px;
        height: 82px;
        margin-right: 8px;

        .avatar {
          width: 82px;
          height: 82px;
          border-radius: 50%;
          // box-sizing: border-box;
          border: 2px solid #fafafa;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .verified {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-self: center;

        .top {
          // width: 160px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 5px;

          .nickname {
            // font-weight: bold;
            font-size: 19px;
            margin-right: 7px;
          }

          .medal {
            font-size: 12px;
            font-weight: bold;
            margin-right: 5px;
            width: 52px;
            padding-right: 7px;
            height: 30px;
            text-align: right;
            line-height: 30px;
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center center;
            color: #796849;
            cursor: pointer;
          }

          .lv {
            font-size: 16px;
            font-style: italic;
            color: #f8d24e;
            font-weight: bold;
            cursor: pointer;
          }
        }

        .follow {
          width: 244px;
          text-align: center;
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
          background-color: #ffc536;
          font-size: 16px;
          // font-weight: bold;
          cursor: pointer;
        }

        .isFollow {
          width: 244px;
          text-align: center;
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
          background-color: #fafafa;
          font-size: 16px;
          color: #999;
          // font-weight: bold;
          cursor: pointer;
        }
      }
    }

    .sub {
      display: flex;
      margin-bottom: 5px;
      // overflow: hidden;

      div {
        font-size: 14px;
        font-weight: bold;
        margin-right: 10px;
        flex-shrink: 0;
      }

      // .ip {
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      // }
    }

    .signature {
      font-size: 15px;
      white-space: pre-wrap;
    }
  }

  .first-navBox {
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .first-nav:first-of-type {
      margin-left: 8px;
    }

    .first-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .number {
        font-size: 15px;
        margin-bottom: 10px;
        color: #000;
      }

      .word {
        font-size: 13px;
        color: #999;
      }
    }
  }

  .sec-navBox {
    height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 20px;

    .sec-nav:nth-of-type(2) {
      margin: 0 45px;
    }

    .sec-nav {
      a {
        font-size: 16px;
        color: #999;
      }

      .router-link-active {
        color: #000;
        font-weight: bold;
      }
    }
  }
}
</style>
